const path = require('path');
const { ProvidePlugin } = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src',
    plugins: [
        new HtmlWebpackPlugin({
          filename: "index.html",
          template: path.resolve(__dirname, './public/index.html')
        }),
        new ProvidePlugin({
          "lazy": ['react', 'lazy'],
          "useContext": ['react', 'useContext']
        }),
    ],
    module: {
        rules: [
          {
            test: /\.css|.less$/,
            exclude: /node_modules/,
            use: ['style-loader', 'css-loader', 'less-loader'],
          },
          {
            test: /\.js$/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: [
                  ['@babel/preset-react', {
                    "runtime": "automatic"
                  }],
                  ['@babel/preset-env']
                ],
                plugins: [
                  "react-hot-loader/babel",
                  '@babel/plugin-transform-runtime',
                  ["@babel/plugin-proposal-decorators", {
                    legacy: true
                  }]
                ],
              },
            },
            exclude: /node_modules/,
          },
          {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            type: "asset",
            parser: {
              dataUrlCondition: {
                maxSize: 10 * 1024 // 10kb 
              }
            },
            generator: {
              filename: "images/[name][ext]"
            },
          },
          {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            type: "asset/resource",
            generator: {
              filename: "fonts/[name][ext]"
            },
            parser: {
              dataUrlCondition: {
                maxSize: 10 * 1024 // 10kb 
              }
            }
          },
        ],
    },
}